<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
            <el-form :inline="true" :model="filters" style="display: flex">
                <div style="display: flex;flex: 1">
                    <el-form-item>
                        <el-button @click="reloadPage">刷新</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning" :disabled="checkedList.length===0" @click="putawayAll('down')">上架</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" :disabled="checkedList.length===0" @click="putawayAll('del')">删除</el-button>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item>
                        <el-input v-model="filters.title" placeholder="快速查找活动"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="lookForList">查询</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="$router.push({path: '/goodsadd'})">添加活动</el-button>
                    </el-form-item>
                </div>
            </el-form>

        </el-col>

        <!--列表-->
        <template>
            <el-table :data="goods" v-loading="loading" stripe style="width: 100%;"@selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <!--				<el-table-column type="index" width="60">-->
                <!--				</el-table-column>-->
                <el-table-column prop="displayorder" label="排序" width="100" sortable>
                    <template slot-scope="scope">
                        <el-input @blur="updateTitle" autofocus v-if="scope.row.isShowInput2" v-model="scope.row.displayorder" placeholder="请输入内容" style="width: 100%"></el-input>
                        <span style="color: #337ab7;" v-else @click="activeIndex(scope.$index, scope.row)">{{scope.row.displayorder}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="头图" width="80" style="padding-bottom: 15px;">
                    <template slot-scope="scope">
                        <img :src="scope.row.banner" class="head_pic" />
                    </template>
                </el-table-column>
                <!--				prop="title"-->
                <el-table-column label="名称" sortable>

                    <template slot-scope="scope">
                        <p class="merch">
                            <span style="background-color: #67C23A;padding: 2px 4px;color: #fff;border-radius: 3px;font-size: 10px">{{ scope.row.merch_name}}</span>
                            <span v-if="scope.row.settlement_status === 0" class="sta">未完结</span>
                            <span v-if="scope.row.settlement_status === 1" class="sta">已完结</span>
                            <span v-if="scope.row.settlement_status === 2" class="sta">已结算</span>
                            <br>
                            <el-input @blur="updateTitle" autofocus v-if="scope.row.isShowInput" v-model="scope.row.title" placeholder="请输入内容" style="width: 100%"></el-input>
                            <span style="color: #337ab7;" v-else @click="activeInput(scope.$index, scope.row)">{{scope.row.title}}</span>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="价格" width="100" sortable>
                    <template slot-scope="scope">
                        <el-input @blur="updateTitle" autofocus v-if="scope.row.isShowInput1" v-model="scope.row.price" placeholder="请输入内容" style="width: 100%"></el-input>
                        <span style="color: #337ab7;" v-else @click="activeInputOne(scope.$index, scope.row)">{{scope.row.price}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="total" label="限额" width="100" sortable>
                </el-table-column>
                <el-table-column prop="sales" label="已报名" width="100" sortable>
                </el-table-column>
                <el-table-column label="状态" width="100" >
                    <template slot-scope="scope">
                        <el-button :type="miStatusColor(scope.row.status)" size="mini" @click="handleSta(scope.$index, scope.row)">{{ formatSta(scope.row) }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  width="220">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit" circle></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="复制链接" placement="top">
                            <el-button size="mini" @click="handlecopy(scope.$index, scope.row)" icon="fa fa-link" circle></el-button>
                        </el-tooltip>

                        <el-popover
                                ref="popover1"
                                placement="left-start"
                                trigger="click">
                            <img :src="code" alt="" style="width: 120px;height: 120px;">
                        </el-popover>
                        <el-tooltip class="item" effect="dark" content="二维码" placement="top">
                            <el-button size="mini" v-popover:popover1 @click="handleqrcode(scope.$index, scope.row)" icon="fa fa-qrcode" circle style="margin: 0 10px;width: 29px;height: 29px"></el-button>
                        </el-tooltip>
                        <el-popover
                                ref="popover1"
                                placement="left-start"
                                trigger="click">
                            <img :src="code" alt="" style="width: 120px;height: 120px;">
                        </el-popover>
                        <el-tooltip class="item" effect="dark" content="报名数据" placement="top">
                            <el-button size="mini" @click="activityOrderList(scope.$index, scope.row)" icon="fa fa-navicon" circle></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete" circle></el-button>
                        </el-tooltip>
                    </template>

                </el-table-column>

            </el-table>
            <!--			<div class="is-code" style="width: 100px;height: 100px;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;z-index: 9999">-->
            <!--				<img :src="code" alt="" style="width: 100%">-->
            <!--			</div>-->

            <!-- 页码 -->
            <el-col :span="24" class="toolbar">
                <!--            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"-->
                <!--                           :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">-->
                <!--            </el-pagination>-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount">
                </el-pagination>
            </el-col>
        </template>

    </section>
</template>
<script>
    import { getActiveList,soldOutDelete,editActive } from '../../api/goodsAPI'
    export default {
        data() {
            return {
                totalCount: 0, // 总共多少条
                pageSize: 10, // 每页显示条目个数
                pageSizes: [10, 20, 30, 40], // 每页显示个数选择器的选项设置
                currentPage: 1, // 当前页数
                filters: {
                    title: '' // 查询的关键字
                },
                loading: false,
                miStatusColor: function(val) {
                    if (val === 1) {
                        return 'primary'
                    } else {
                        return 'warning'
                    }
                },
                goods: [], // 活动列表
                checkedList: [], // 选中的活动列表
                titleName: '', // 名称
                presentObj: {}, // 修改的当前对象
                code: '' // 二维码
            }
        },
        methods: {
            activeIndex(index, row) {
                this.goods.forEach(i => {
                    i.isShowInput2 = false
                })
                row.isShowInput2 = true;
                console.log(row)
                this.presentObj = row
            },
            activeInput(index, row) {
                this.goods.forEach(i => {
                    i.isShowInput = false
                })
                row.isShowInput = true;
                console.log(row)
                this.presentObj = row
            },
            activeInputOne(index, row) {
                this.goods.forEach(i => {
                    i.isShowInput1 = false
                })
                row.isShowInput1 = true;
                console.log(row)
                this.presentObj = row
            },
            // 修改名称
            updateTitle() {
                console.log(this.presentObj)
                editActive(this.presentObj).then(res => {
                    this.goods.forEach(i => {
                        i.isShowInput = false
                        i.isShowInput1 = false
                        i.isShowInput2 = false
                    })
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                    this._getactivity()
                }).catch(err => {
                    this.goods.forEach(i => {
                        i.isShowInput = false
                        i.isShowInput1 = false
                        i.isShowInput2 = false
                    })
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })
            },
            // 分页的
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                // 改变每页显示的条数
                this.pageSize = val;
                this._getactivity()
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage = 1
            },
            // 分页的
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this._getactivity()
            },
            // 刷新页面
            reloadPage() {
                // window.location.reload(); // 刷新当前页面
                location.reload();
            },
            // 打钩的事件
            handleSelectionChange(val) {
                this.checkedList = val;
                console.log(val)
            },
            // 查询点击
            lookForList() {
                this._getactivity()
            },
            // 批量上架
            putawayAll(item) {
                let ids = this.checkedList.map(item => item.id)
                console.log(ids)
                console.log(item)
                let data = { ids: ids }
                if (item === 'down') {
                    data = { ...data, status: 1 }
                    console.log(data)

                    this.$confirm('确认上架吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        soldOutDelete(data).then(res => {
                            this.$message({
                                type: 'success ',
                                message: '上架成功'
                            });
                            this._getactivity()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });

                } else {
                    data = { ...data, delete: 1 }
                    console.log(data)
                    this.$confirm('确认删除吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        soldOutDelete(data).then(res => {
                            this.$message({
                                type: 'success ',
                                message: '删除成功'
                            });
                            this._getactivity()
                        }).catch(err => {
                            this.$message({
                                message: err.response.data.message,
                                type: 'error'
                            })
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }

            },
            //状态显示转换
            formatSta(row, column) {
                // return row.status === 1 ? '启用' : row.status === 0 ? '禁用' : '未知';
                return row.status === 1 ? '上架中' : row.status === 0 ? '已下架' : '未知';
            },
            //获取活动列表
            _getactivity() {
                let params = {
                    // page: this.page,
                    // name: this.filters.name
                    p: this.currentPage,
                    length: this.pageSize,
                    keyword: this.filters.title,
                    status: 0
                };
                this.listLoading = true;
                // NProgress.start();
                getActiveList(params).then(res => {
                    this.listLoading = false;
                    res.data.list.forEach(obj => {
                        obj.isShowInput = false
                        obj.isShowInput1 = false
                        obj.isShowInput2 = false
                    })
                    this.goods = res.data.list;
                    this.totalCount = res.data.total
                    console.log(this.goods)
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })
                // this.$axios.get("/api/admin/activity/list")
                // .then(res=>{
                // 	this.listLoading = false;
                // 	this.goods=res.data.data.list;
                // })
                // .catch(err=>{
                // 	console.log(err)
                // })
            },
            // 下架和上架按钮
            handleSta(index, row) {
                console.log(row)
                let text = "";
                if (row.status === 1) {
                    text = "确认下架？";
                    this.$confirm(text, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let data = {
                            ids: row.id,
                            status: 0
                        }
                        soldOutDelete(data).then(res => {
                            this.$message({
                                type: 'success',
                                message: '下架成功!'
                            });
                            this._getactivity()
                        }).catch(err => {
                            this.$message({
                                message: err.response.data.message,
                                type: 'error'
                            })
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                } else {
                    text = "确认上架？";
                    this.$confirm(text, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let data = {
                            ids: row.id,
                            status: 1
                        }
                        soldOutDelete(data).then(res => {
                            this.$message({
                                type: 'success',
                                message: '上架成功!'
                            });
                            this._getactivity()
                        }).catch(err => {
                            this.$message({
                                message: err.response.data.message,
                                type: 'error'
                            })
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }

            },
            // 编辑按钮
            handleEdit(index, row) {
                console.log(index, row);
                this.$router.push({path: '/editActivity',query: {id: row.id}})
                // this.$router.push({path: '/editActivity',query: {id: row.id, page: this.currentPage}})
            },
            // 复制按钮
            handlecopy(index, row) {
                console.log(index, row)
                const input = document.createElement('input')
                document.body.appendChild(input)
                input.setAttribute('value', `https://mobile.laiba.shop/html/#/pages/active/detail?id=${row.id}`)
                input.select()
                if (document.execCommand('copy')) {
                    document.execCommand('copy')
                }
                document.body.removeChild(input)
                this.$message({
                    type: 'success',
                    message: '复制成功!'
                });
            },
            // 每行的 删除按钮 删除 单条数据
            handleDelete(index, row) {
                console.log(index, row);
                let data = {
                    ids: row.id,
                    delete: 1
                }
                this.$confirm('确认删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    soldOutDelete(data).then(res => {
                        this.$message({
                            type: 'success ',
                            message: '删除成功'
                        });
                        console.log(data)
                        this._getactivity()
                    }).catch(err => {
                        this.$message({
                            message: err.response.data.message,
                            type: 'error'
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 二维码点击事件
            handleqrcode(index, row) {
                console.log(index,row)
                this.code = row.qrcode
            },
            // 报名情况
            activityOrderList(index, row) {
                console.log(index,row)
                this.$router.push({path: '/activityOrder',query: {id: row.id}})
            }
        },
        created() {
            this._getactivity(); // 获取活动列表
        },

    };
</script>

<style scoped lang="scss">
    @import '~scss_vars';

    .head_pic {
        width: 40px;
        height: 40px;
        padding: 1px;
        border: 1px solid #ccc;
        vertical-align: middle;
        margin: 3px 0;
    }
    .el-table .cell {
        padding: 3px;
    }
    .sta {
        font-size: 10px;
        padding-left: 10px;
        padding-top: 2px;
        color: #67c23a;
    }
</style>

